<template lang="html">
  <div class="yo-scroll"
  :class="{'down':(state===0),'up':(state===1),'refresh':(state===2),'touch':touching}"
  @touchstart="touchStart($event)"
  @touchmove="touchMove($event)"
  @touchend="touchEnd($event)"
  @scroll="onScroll($event)">
    <section class="inner" :style="{ transform: 'translate3d(0, ' + top + 'px, 0)' }">
      <div class="pull-refresh">
        <slot name="pull-refresh">
           <span class="down-tip">下拉更新</span>
           <span class="up-tip">松开更新</span>
           <span class="refresh-tip">
             <template class="template_spin">
                <Spin></Spin>
                <div class="spin_text">不要急哦~</div>
            </template>
             <!-- <i>不要急哦~</i> -->
          </span>
        </slot>
      </div>
      <slot></slot>
    </section>
  </div>
</template>

<script>
import bus from '../js/bus'
export default {
  props: {
    offset: {
      type: Number,
      default: 40
    },
    enableRefresh: {
      type: Boolean,
      default: true
    },
    onRefresh: {
      type: Function,
      default: undefined,
      required: false
    }
  },
  data() {
    return {
      top: 0,
      state: 0,
      startX:0,
      startY: 0,
      moveEndX:0,
      moveEndY:0,
      touching: false
    }
  },
  methods: {
    touchStart(e) {
      console.log("touchestart");
      this.startY = e.targetTouches[0].pageY
      this.startScroll = this.$el.scrollTop || 0
      console.log(this);
      console.log(this.startScroll);
      this.touching = true
      this.startX = e.targetTouches[0].pageX
    },
    touchMove(e) {
      console.log("touchMove");
      if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
        return
      }
      console.log(this.startScroll);
      let diff = e.targetTouches[0].pageY - this.startY


      this.moveEndX = e.targetTouches[0].pageX

      this.moveEndY = e.targetTouches[0].pageY

      let X = this.moveEndX - this.startX

      let Y = this.moveEndY - this.startY

        var w = X<0?X*-1:X;     //x轴的滑动值
        var h = Y<0?Y*-1:Y;     //y轴的滑动值
        if(w>h){                //如果是在x轴中滑动
           e.preventDefault();
        }
      if (diff > 0){
          bus.$emit('scolby',diff)
          // e.preventDefault()
      }
      this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
      if (this.state === 2) { // in refreshing
        return
      }
      if (this.top >= this.offset) {
        this.state = 1
      } else {
        this.state = 0
      }
    },
    touchEnd(e) {
      console.log("touchEnd");
      if (!this.enableRefresh) return
      this.touching = false
      if (this.state === 2) { // in refreshing
        this.state = 2
        this.top = this.offset
        return
      }
      if (this.top >= this.offset) { // do refresh
        this.refresh()
      } else { // cancel refresh
        this.state = 0
        this.top = 0
      }
    },
    refresh() {
        console.log("refresh");
      this.state = 2
      this.top = this.offset
      this.onRefresh(this.refreshDone)
    },
    refreshDone() {

        console.log("refreshDone");
      this.state = 0
      this.top = 0
    },
    onScroll(e) {
      console.log('111');
      let scrollTop = this.$el.scrollTop
      console.log(scrollTop);
      let flag;
      if (scrollTop > window.screen.availHeight/3) {
        flag = true
      }else {
        flag = false
      }
      bus.$emit('flagby',flag)
    }
  }
}
</script>
<style scoped>
.yo-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}
.yo-scroll .inner {
  position: absolute;
  top: -2rem;
  width: 100%;
  transition-duration: 300ms;
}
.yo-scroll .pull-refresh {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.yo-scroll.touch .inner {
  transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
  display: block;
}
.yo-scroll.up .up-tip {
  display: block;
}
.yo-scroll.refresh .refresh-tip {
  display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
  display: none;
}
.yo-scroll .load-more {
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.template_spin{
   margin-left: -5rem;
}
.spin_text{
   margin-left: 2rem;
   margin-top: -1.5rem;
   margin-bottom: 0.5rem;
   font-size: 1rem;
}
</style>
